<template>
  <view class="catalogue-container">
    <view class="catalogue-section">
      <view class="grid-container">
        <view 
          v-for="(item, iIdx) in catalogue"
          :key="iIdx"
          class="grid-item"
          @click="getClassIfyData(item.name)"
        >
          <view class="grid-item-icon">
            <view class="icon-picture"></view>
          </view>
          <view class="grid-item-text">{{ item.name }}</view>
        </view>
        <view class="grid-item" @click="addClassIfy">
          <view class="grid-item-icon">
            <view class="icon-search"></view>
          </view>
          <view class="grid-item-text">更多</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import CultureAPI from "@/api/culture";
import type { CultureCategoryItem } from "@/api/culture.ts";

// 用户信息参数
const showMorePopup = ref(false);

// 用户信息参数
const action = ref("/api/v1/files");

const addParams = reactive({
  classIfyTitle: "",
  fileList: [],
});

const catalogue = ref<CultureCategoryItem[]>([]);
// 修改 initCultrue 方法，将获取到的数据赋值给 catalogue
const initCultrue = () => {
  const params = {
    pageNum: "1",
    pageSize: "10",
  };
  CultureAPI.getCultureCategoryList(params)
    .then((response) => {
      console.log(response);
      // 将获取到的数据赋值给 catalogue
      if (response.list && response.list.length > 0) {
        catalogue.value = response.list;
      }
    })
    .catch((error) => {
      console.error("获取文化分类列表失败:", error);
    });
};
// 点击获取分类的数据
const getClassIfyData = (name: string) => {
  // uni.navigateTo({
  //   url: "/pages/work/familyHistory/components/clanCulture?name=" + name,
  // });
};
// 动态添加分类
const addClassIfy = () => {
  uni.navigateTo({
    url: "/pages/work/culture/index",
  });
  // showMorePopup.value = true;
};
// 动态添加图片
const handleUploadChange = (fileList: any) => {
  addParams.fileList = fileList;
};
// 确定添加分类
const submitClassIfy = () => {
  // 验证输入
  if (!addParams.classIfyTitle.trim()) {
    uni.showToast({
      title: "请输入分类名称",
      icon: "none",
    });
    return;
  }

  // 创建新分类对象
  const newCategory = {
    id: Date.now(), // 临时ID，实际应由后端生成
    name: addParams.classIfyTitle,
    // 如果有其他必需字段，也需要添加
    code: "", // 假设可为空或后续补充
    sort: 0, // 默认排序
    description: "", // 默认描述
    status: 1, // 假设 1 表示启用状态
    isDeleted: 0, // 可选字段默认值
    createTime: new Date().toISOString(),
    updateTime: new Date().toISOString(),
    createBy: 0, // 假设默认创建人ID
    updateBy: 0, // 假设默认更新人ID
  };

  // 将新分类添加到 catalogue 数组开头
  catalogue.value.push(newCategory);

  // 显示成功提示
  uni.showToast({
    title: "分类添加成功",
    icon: "success",
  });

  // 关闭弹窗
  showMorePopup.value = false;

  // 重置表单
  addParams.classIfyTitle = "";
  addParams.fileList = [];
};

onMounted(() => {
  initCultrue();
});
</script>

<style scoped>
.popup-container {
  padding: 10px;
}
.popup-content {
  padding-top: 10px;
}
.popup-content .popup-footer {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}
/deep/.popup-footer .wd-button {
  min-width: 6rem !important;
}
.popup-title {
  width: 84%;
  text-align: center;
  display: inline-block;
}
.catalogue-container {
  padding: 32rpx 24rpx;
  background: #f9f7f3;
  min-height: 100vh;
}

.catalogue-title {
  font-size: 40rpx;
  font-weight: bold;
  color: #bfa36b;
  text-align: center;
  margin-bottom: 36rpx;
  letter-spacing: 2rpx;
}

.catalogue-section {
  margin-bottom: 32rpx;
  background: #fff;
  border-radius: 18rpx;
  box-shadow: 0 2rpx 8rpx rgba(191, 163, 107, 0.06);
  padding: 24rpx 20rpx;
}

.section-title {
  font-size: 32rpx;
  color: #e95d2a;
  font-weight: bold;
  margin-bottom: 18rpx;
}

.section-content {
  display: grid;
}

.section-item {
  display: flex;
  align-items: baseline;
  gap: 12rpx;
  font-size: 28rpx;
  color: #333;
  width: 100rpx;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}

.section-link,
.section-item {
  cursor: pointer;
  transition: background 0.2s;
}

.section-link:active,
.section-item:active {
  background: #f5e9da;
}

.section-link .item-title,
.section-item .item-title {
  color: #165dff;
}

.item-index {
  color: #bfa36b;
  font-weight: bold;
  min-width: 60rpx;
  margin-right: 10px;
}

.item-title {
  flex: 1;
  word-break: break-all;
}

/* 原生网格布局样式 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
  min-height: 120rpx;
  cursor: pointer;
  transition: background-color 0.2s;
}

.grid-item:active {
  background-color: #f5e9da;
  border-radius: 8rpx;
}

.grid-item-icon {
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10rpx;
  color: #333;
}

/* 简单的图标样式模拟 */
.icon-picture,
.icon-search {
  width: 40rpx;
  height: 40rpx;
  background-color: #333;
  border-radius: 8rpx;
}

/* 为了更好地模拟原始样式，可以根据需要调整图标的具体实现 */
.icon-picture {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M21,19V5C21,3.9 20.1,3 19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19M19,19H5V5H19V19M14.59,8L12,10.59L9.41,8L8,9.41L10.59,12L8,14.59L9.41,16L12,13.41L14.59,16L16,14.59L13.41,12L16,9.41L14.59,8Z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.icon-search {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23333"><path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.grid-item-text {
  font-size: 24rpx;
  color: #333;
  text-align: center;
  margin-top: 8rpx;
  word-break: break-word;
  padding: 0 10rpx;
}
</style>
